<template>
	<view class="disposition">
		<NavBar title="配置"/>
		<view class="content">
			<view class="user-info" @tap="goShopDetails">
				<view class="avatar">
					<image :src="shopInfo.logo" class="a-img"/>
					<view class="label"> {{shopInfo.name}} </view>
				</view>
				<image src="/static/icon/order/right.png" class="right" />
			</view>
			<view class="shop-info">
				<view class="shop-item">
					<view class="label"> 店铺休息 </view>
					<view class="value" @tap="editStatus"> 
						<view class="text"> 休息时不会接单 </view>
						<image class="switch" src="/static/icon/mine/switch.png" mode="widthFix" v-if="shopInfo.open_status==1" />
						<image class="switch" src="/static/icon/mine/a-switch.png" mode="widthFix" v-else />
					</view>
				</view>
				<view class="shop-item" @tap="editPwd">
					<view class="label"> 修改密码 </view>
					<view class="value"> 
						<image class="right" src="/static/icon/order/right.png" />
					</view>
				</view>
				<view class="shop-item">
					<view class="label"> 营业时间 </view>
					<view class="value" @tap="pickTimeRef.open()"> 
						<view class="time"> {{shopInfo.open_time}}-{{shopInfo.over_time}} </view>
						<image class="right" src="/static/icon/order/right.png" />
					</view>
				</view>
				<view class="shop-item" @tap="goKeyWord">
					<view class="label"> 店铺关键词搜索 </view>
					<view class="value"> 
						<image class="right" src="/static/icon/order/right.png" />
					</view>
				</view>
			</view>
		</view>
		<SelectTime ref="pickTimeRef" @selectedTime="pickTime"/>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import SelectTime from '@/components/SelectTime.vue';
	import { EidtSettingShopApi } from '@/service/shop.js'
	const pickTimeRef = ref()
	const shopInfo = ref({
		id: '',
		logo: '',
		name: '',
		type: '',
	})
	const pickTime = (e) => {
		const time = e.split('至')
		const params = {
			open_time: time[0],
			over_time: time[1]
		}
		EidtSettingShopApi(params).then(res => {
			shopInfo.value.open_time = params.open_time
			shopInfo.value.over_time = params.over_time
			pickTimeRef.value.close()
			getApp().globalData.toast('修改成功')
		})
	}
	const editStatus = () => {
		let params = {
			open_status: shopInfo.value.open_status==1?2:1
		}
		EidtSettingShopApi(params).then(res => {
			shopInfo.value.open_status = params.open_status
			getApp().globalData.toast('修改成功')
		})
	}
	const goShopDetails = () => {
		uni.navigateTo({
			url: `/pages/shopPages/disposition/shopDetails?info=${JSON.stringify(shopInfo.value)}`
		})
	}
	const editPwd = () => {
		uni.navigateTo({
			url: '/pages/accountCancellation/accountCancellation?title=修改密码'
		})
	}
	const goKeyWord = () => {
		uni.navigateTo({
			url: '/pages/shopPages/shopKeyWord/shopKeyWord'
		})
	}
	onLoad((e) => {
		const { info } = e
		shopInfo.value = JSON.parse(info)
	})
</script>

<style scoped lang="scss">
	.disposition {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.user-info {
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			.avatar {
				display: flex;
				align-items: center;
				.a-img {
					width: 54px;
					height: 54px;
					border-radius: 50%;
					margin-right: 10px;
				}
				.label {
					color: #333333;
					font-size: 16px;
					font-weight: 500;
					line-height: 19px;
				}
			}
			.right {
				width: 14px;
				height: 14px;
			}
		}
		.shop-info {
			padding: 0 12px;
			border-radius: 10px;
			background-color: #fff;
			box-sizing: border-box;
			.shop-item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
				}
				.value {
					display: flex;
					font-size: 14px;
					font-weight: 400;
					align-items: center;
					.text {
						color: #999999;
					}
					.time {
						color: #666666;
					}
					.switch {
						width: 40px;
						margin-left: 8px;
					}
					.right {
						width: 14px;
						height: 14px;
						margin-left: 6px;
					}
				}
			}
		}
	}
</style>
